<template>
  <div
    style="display:flex;flex-direction:column;position:fixed;width:100%;height:100vh;background-color: #f4f5f6;"
  >
    <div>
      <van-nav-bar style="z-index:100;" class="nav-bar" id="nav" :border="false">
        <font color="#ffffff" class="title" slot="left">我的</font>
      </van-nav-bar>
      <div style="position: relative;margin:auto;margin-top:-74px;z-index:200;" class="mineCard">
        <img src="@/assets/huadao_logo3.png" width="116px" height="116px" style="margin:auto" />
      </div>
    </div>
    <p
      style="padding:0;margin-top:15px;font-size:20px;font-family:PingFangSC;font-weight:400;color:rgba(34,61,121,1);line-height:28px;letter-spacing:1px;"
    >{{email}}
    </p>

     <div class="mineInfo">
      <div style="background-color:white; width:100%;" v-if="true">
        <van-cell-group>
          <van-cell title="设备名称" value="设备名称" value-class="textLeft" title-class="textLeft" />
          <van-cell title="设备编号" value="设备编号" value-class="textLeft" title-class="textLeft" />
          <van-cell title="MAC地址" value="MAC地址" value-class="textLeft" title-class="textLeft" />
          <van-cell title="IP" value="IP" value-class="textLeft" title-class="textLeft" />
          <van-cell title="PORT" value="PORT" value-class="textLeft" title-class="textLeft" />
        </van-cell-group>
      </div>
      <van-button class="logoutBtn" bottom-action="true"  @click="confirmLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { mapActions } from "vuex";
import consts from "@/utils/consts";
export default {
  data() {
    return {
      email: this.$store.getters.email + consts.emailSuffix,
      mac: ""
    };
  },
  methods: {
    ...mapActions(["logout"]),
    confirmLogout() {
      Dialog.confirm({
        title: "退出登录",
        message: "确认退出登录吗？"
      })
        .then(() => {
          // on confirm
          this.logout();
          // window.localStorage.clear();
          // this.$router.push({ path: "/login" });
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  created() {
    // this.mac = android.getMacAddress();
  }
};
</script>

<style lang="scss" scoped>
.nav-bar {
  background-color: #1c356c;
  background-size: cover;
  height: 140px !important;
}

.title {
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 42px;
  letter-spacing: 1px;
}
.van-nav-bar__left {
  margin-top: 11px;
}
.van-nav-bar__left {
  top: 0;
}
.van-cell__title {
  width: 30%;
  flex: none;
}

.mineCard {
  // width: 100%;
  // height: 20%;
  // background: url("../assets/bg.png") no-repeat center center;
  // padding-top: 20px;
  // padding-bottom: 20px;
  // background-size: cover;

  width: 148px;
  height: 148px;
  background: rgba(28, 53, 108, 1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.mineInfo {
  background: url("../assets/mine-bg.png") no-repeat center center;
  width: 100%;
  // padding-top: 5px;
  // height: 80%;
  height: 100%;
  display: flex;
  margin-bottom: 80px;
  justify-content: center;
}
.textLeft {
  text-align: left;
}

.logoutBtn {
  margin-top: 30px;
  margin-bottom: 22px;
  width: 454px;
  height: 56px;
  background: rgba(28, 53, 108, 1);
  border-radius: 4px;
  font-size: 22px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 45px;
  letter-spacing: 1px;
  align-self: flex-end;
}

</style>

